<template>
  <div class="content">
    <el-card class="box-card">
      <div class="main">
        <div class="title">
          <h2>{{ exportData.scaleTitle }}</h2>
          <h5>制作报告的时间:{{ exportData.submitTime }}</h5>
        </div>
        <div class="table">
          <div class="tableName">一、描述统计:</div>
          <!-- <el-table
            :data="exportData.combinationStatisticsList"
            tooltip-effect="dark"
            style="width: 100%"
            border
            stripe
            :header-cell-style="{
              'text-align': 'center',
              background: '#2196f3',
              color: '#fff',
            }"
            :cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
              label="团体"
              prop="combinationName"
            ></el-table-column>
            <el-table-column
              label="维度"
              prop="dimensionStatistics.dimensionName"
            >
              {{ exportData.dimensionName }}
            </el-table-column>
            <el-table-column
              label="平均值"
              prop="dimensionStatistics.average"
            ></el-table-column>
            <el-table-column
              label="标准差"
              prop="dimensionStatistics.Standard"
            ></el-table-column>
          </el-table> -->

          <el-table
            :data="exportData.combinationStatisticsList"
            tooltip-effect="dark"
            style="width: 100%"
            border
            stripe
            :header-cell-style="{
              'text-align': 'center',
              background: '#2196f3',
              color: '#fff',
            }"
            :cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
              prop="combinationName"
              label="组合名称"
              width="150"
            >
            </el-table-column>
            <el-table-column prop="dimensionStatistics" label="维度统计">
              <template slot-scope="scope">
                <el-table
                  :data="scope.row.dimensionStatistics"
                  tooltip-effect="dark"
                  style="width: 100%"
                  border
                  stripe
                  :header-cell-style="{
                    'text-align': 'center',
                  }"
                  :cell-style="{ 'text-align': 'center' }"
                >
                  <el-table-column prop="dimensionName" label="维度名称">
                  </el-table-column>
                  <el-table-column prop="average" label="平均值">
                  </el-table-column>
                  <el-table-column prop="standard" label="标准值">
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
          </el-table>

          <div class="tableName">二、差异分析:</div>
          <el-table
            :data="exportData.differentialAnalysisList"
            tooltip-effect="dark"
            style="width: 100%"
            border
            stripe
            :header-cell-style="{
              'text-align': 'center',
              background: '#2196f3',
              color: '#fff',
            }"
            :cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
              label="维度名称"
              prop="dimensionName"
              width="150"
            ></el-table-column>
            <el-table-column prop="dimensionStatistics" label="维度统计">
              <template slot-scope="scope">
                <el-table
                  :data="scope.row.differs"
                  tooltip-effect="dark"
                  style="width: 100%"
                  border
                  stripe
                  :header-cell-style="{
                    'text-align': 'center',
                  }"
                  :cell-style="{ 'text-align': 'center' }"
                >
                  <el-table-column prop="differName" label="差异分析">
                  </el-table-column>
                  <el-table-column prop="squares" label="平方和">
                    <template slot-scope="scope">
                      <span
                        >{{ (scope.row.squares).toFixed(2) }}
                        </span>
                       </template>  

                  </el-table-column>
                  <el-table-column prop="freedom" label="自由度">
                  </el-table-column>
                  <el-table-column prop="averages" label="均方">
                    <template slot-scope="scope">
                      <span
                        >{{ (scope.row.averages).toFixed(2) }}
                        </span>
                        </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <!-- <el-table-column
              label="维度名称"
              prop="dimensionName"
            ></el-table-column>
            <el-table-column
              label="差异分析"
              prop="differs.differName"
            ></el-table-column>
            <el-table-column
              label="平方和"
              prop="differs.squares"
            ></el-table-column>
            <el-table-column
              label="自由度"
              prop="differs.freedom"
            ></el-table-column>
            <el-table-column
              label="均方"
              prop="differs.average"
            ></el-table-column> -->
            <!-- <el-table-column label="F值" prop="F_data"></el-table-column>
            <el-table-column label="P值" prop="P_data"></el-table-column> -->
          </el-table>

          <div class="tableName">三、结论:</div>
          <div class="conclusion">
            {{ exportData.conclusion }}
          </div>
        </div>
      </div>
      <div class="btn" v-if="showBtn">
        <el-button type="warning" @click="exportTable">导出</el-button>
        <el-button type="primary" @click="cancel">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import { jsPDF } from "jspdf";
export default {
  props: ["exportData"],
  data() {
    return {
      showBtn: true,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      setTimeout(() => {
        console.log(this.exportData);
      }, 1000);
    },
    // 合并列
    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // Merge the first column for every fourth row
        if (rowIndex % 4 === 0) {
          return {
            rowspan: 4,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      } else {
        // For other columns, merge every sixteen rows
        if (rowIndex % 16 === 0) {
          return {
            rowspan: 16,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },

    objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 5 || columnIndex === 6) {
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        }
      }
    },
    // 取消
    cancel() {
      this.$emit("cancel");
    },
    // 导出
    exportTable() {
      this.showBtn = false;
      this.$nextTick(() => {
        const contentElement = document.querySelector(".box-card");

        // Use html2canvas to capture the content as an image
        html2canvas(contentElement).then((canvas) => {
          const imgData = canvas.toDataURL("image/jpeg");
          const pdf = new jsPDF();

          const imgWidth = 210; // A4 width in mm
          const imgHeight = (canvas.height * imgWidth) / canvas.width;

          let position = 0;
          let pageHeight = imgHeight;

          // Add content to PDF in chunks, creating new pages as needed
          while (position < canvas.height) {
            const chunkHeight = Math.min(pageHeight, canvas.height - position);
            pdf.addImage(
              imgData,
              "JPEG",
              0,
              0,
              imgWidth,
              chunkHeight,
              "",
              "FAST"
            );
            position += chunkHeight;

            // If there's more content, add a new page
            // if (position < canvas.height) {
            //   pdf.addPage();
            // }
          }

          // Save the PDF file
          pdf.save("统计分析.pdf");
        });
      });
      this.showBtn = true;
    },


  },
};
</script>

<style scoped>
.content {
  padding: 0 2rem;
}
.box-card {
  width: 100%;
  text-align: center;
}
.main {
  width: 100%;
  text-align: center;
  padding: 1rem 0;
}
.table {
  width: 100%;
  text-align: start;
}
.tableName {
  margin: 3rem 0 1rem 0;
}
.conclusion {
  margin: 2rem 0;
  font-size: 1.2rem;
}
.btn {
  text-align: center;
  margin: 4rem 0 2rem 0;
}
</style>